<!--
 * @Description: 缴费查询
 * @Author: 若城
 * @Date: 2023-03-27 23:03:28
 * @LastEditTime: 2023-03-30 12:38:56
-->
<template>
  <view class="pagesSty">
    <view style="background: #fff">
      <u-cell-group>
        <u-cell :title="name" :value="number"></u-cell>
      </u-cell-group>
    </view>
    <view class="tishi" style="background: #fff">
      <u-image
        width="750rpx"
        height="209rpx"
        src="/static/social/tishi.png"
        mode="widthFix"
      ></u-image>
      <text @click="handelLeft" class="dateLeft"></text>
      <text @click="handleRight" class="dateRight"></text>
      <text class="dateLeftWord">{{ leftWord }}</text>
      <text class="dateRightWord">{{ rightWord }}</text>
    </view>
    <u-sticky bgColor="#fff">
      <u-tabs
        :list="list1"
        @click="handleTabs"
        :lineHeight="7"
        :scrollable="false"
        :activeStyle="{
          color: '#3a70ea',
          fontSize: '25rpx',
          paddingBottom: '10rpx',
        }"
        :inactiveStyle="{
          color: '#4e4e4e',
          fontSize: '25rpx',

          paddingBottom: '10rpx',
        }"
      ></u-tabs>
    </u-sticky>
    <u-gap height="16" bgColor="#f5f5f5"></u-gap>
    <!-- 企业职工基本养老保险 -->
    <!-- 工伤保险 -->
    <!-- 失业保险 -->
    <view class="myBpox" v-if="tabData.length" style="background: #fff">
      <u-cell-group v-for="item in tabData" :key="item.id">
        <u-cell  :title="item.date" :value="item.jg">
        </u-cell>
        <view class="myCell"  v-if="tabsId == 1">
          <text class="djCls" slot="title">单位缴费</text>
          <text class="djNum" slot="value">{{ item.dj }}</text>
        </view>
        <u-row
         v-else
          justify="space-between"
          customStyle="margin-bottom: 10px"
        >
          <u-col span="3">
            <view class="search">
              <text class="num">{{ item.gj }}</text>
              <text class="color">个人缴费</text>
            </view>
          </u-col>
          <u-col justify="center" span="1">
            <view class="line"></view>
          </u-col>
          <u-col span="3">
            <view class="search">
              <text class="num">{{ item.dj }}</text>
              <text class="color">单位缴费</text>
            </view>
          </u-col>
          <u-col justify="center" span="1">
            <view class="line"></view>
          </u-col>

          <u-col span="3">
            <view class="search">
              <text class="num">{{ item.gjh }}</text>
              <text class="color">账户划入</text>
            </view>
          </u-col>
        </u-row>
       

        <view class="mybtn">
          <u-button
            @click="handleDetail(item.id)"
            slot="value"
            type="primary"
            :plain="true"
            size="mini"
            >查看详情</u-button
          >
        </view>
      </u-cell-group>
    </view>
    <view class="empty" v-else>
      <u-image
        width="750rpx"
        height="440rpx"
        src="/static/social/wei.png"
        mode="widthFix"
      ></u-image>
    </view>
    <view class="bottmImg">
      <u-image
        width="750rpx"
        height="153rpx"
        src="/static/social/footerWord.png"
        mode="widthFix"
      ></u-image>
    </view>

    <!-- 时间下拉 -->
    <u-datetime-picker
      ref="datetimePicker"
      :show="showLeft"
      v-model="value1"
      minDate="1577808000000"
      mode="date"
      @confirm="confirmleft"
      @cancel="cancel"
      @close="cancel"
      :formatter="formatter"
      :closeOnClickOverlay="true"
    ></u-datetime-picker>

    <u-datetime-picker
      ref="datetimePicker"
      :show="showRight"
      v-model="value2"
      mode="date"
      minDate="1577808000000"
      @confirm="confirm"
      @cancel="cancel"
      @close="cancel"
      :formatter="formatter"
      :closeOnClickOverlay="true"
    ></u-datetime-picker>
  </view>
</template>
  <script>
import { getSXList } from "../../api/rc";
import { timestampToMonth, oldTime } from "../../utils/utils";
export default {
  // onLoad: function (option) {
  //   //option为object类型，会序列化上个页面传递的参数
  //   this.name = option.name;
  //   this.number = option.num;
  // },
  onReady() {
    // 微信小程序需要用此写法
    this.$refs.datetimePicker.setFormatter(this.formatter);
  },
  data() {
    return {
      showLeft: false,
      showRight: false,
      timestampToMonth,
      leftWord: oldTime(),
      rightWord: timestampToMonth(Date.parse(new Date())),
      value1: "",
      value2: "",
      name: "",
      number: "",
      list1: [
        {
          name: "企业职工基本养老保险",
        },
        {
          name: "工伤保险",
          // disabled: true,
        },
        {
          name: "失业保险",
          // disabled: true,
        },
      ],
      tabsId: 0,
      tabData: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      }
      if (type === "month") {
        return `${value}月`;
      }
      if (type === "day") {
        return `${value}日`;
      }
      return value;
    },
    confirmleft(e) {
      //  this.showLeft=false
      this.leftWord = this.timestampToMonth(e.value);
      this.showLeft = false;
      this.init();
    },
    confirm(e) {
      this.rightWord = this.timestampToMonth(e.value);

      this.showRight = false;
      this.init();
    },
    handelLeft() {
      this.showLeft = true;
    },
    handleRight() {
      this.showRight = true;
    },
    cancel() {
      this.showLeft = false;
      this.showRight = false;
    },
    async init() {
      if (this.tabsId != 2) {
        const params = {
          start: this.leftWord,
          end: this.rightWord,
          type: this.tabsId + 1,
        };
        await getSXList(params).then((res) => {
          console.log(
            "🚀 ~ file: paymentInquiry.vue:230 ~ awaitgetSXList ~ res:",
            res
          );

          this.tabData = res.data;
          this.name = res.name;
          this.number = res.number;
        });
      } else {
        this.tabData = [];
      }
    },
    handleTabs(item) {
      // console.log("🚀 ~ file: Insurance.vue:53 ~ handleTabs ~ item:", item);

      this.tabsId = item.index;
      this.init();
    },
    handleDetail(id) {
      uni.navigateTo({
        url: `/pages/socialSecurity/payDetail?id=${id}&tabs=${this.tabsId + ''}`,
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
  .myCell{
     display: flex;
     justify-content: space-between;
     padding: 0 30rpx;
     height: 100rpx;
     align-items: center;
  }
.djCls {
  font-size: 24rpx;
  color: #989898;
}
.djNum {
  font-size: 25rpx;
  color: #333333;
  float: right;
}
// ::v-deep .u-tabs__wrapper__nav {
//     justify-content: space-around;
//     display: flex;
// }
.tishi {
  position: relative;
  .dateLeft {
    width: 216rpx;
    height: 34rpx;
    position: absolute;
    left: 100rpx;
    bottom: 52rpx;
    background: #000;
    opacity: 0;
    z-index: 10;
  }
  .dateRight {
    width: 216rpx;
    height: 34rpx;
    position: absolute;
    left: 453rpx;
    bottom: 52rpx;
    background: #000;
    opacity: 0;

    z-index: 10;
  }
  .dateLeftWord {
    width: 216rpx;
    height: 34rpx;
    position: absolute;
    left: 100rpx;
    bottom: 52rpx;
    // background: #000;
  }
  .dateRightWord {
    width: 216rpx;
    height: 34rpx;
    position: absolute;
    left: 453rpx;
    bottom: 52rpx;
    // background: #000;
  }
}
/deep/ .u-tabs__wrapper__nav__item {
  padding: 0 !important;
}
.search {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 155rpx;
  justify-content: center;
  .num {
    font-size: 25rpx;
  }
  .color {
    font-size: 25rpx;
    color: #969696;
  }
}
.line {
  width: 3rpx;
  height: 41rpx;
  background: #c8c8c8;
}
.mybtn {
  width: 750rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid #f2f2f2;
  height: 100rpx;
  ::v-deep .u-button--mini {
    width: 145rpx !important;
    margin: 0;
    padding: 0;
    margin-right: 25rpx;
  }
}
.bottmImg {
  // position: absolute;
  // bottom: 0;
}
.pagesSty {
  background: #f2f2f2;
}
::v-deep .u-cell__title-text {
  color: #3974e1 !important;
}
::v-deep .u-cell__value {
  color: #4c4c4c !important;
}
.empty {
  width: 750rpx;
  height: 60vh;
  padding-top: 173rpx;
  background: #fff;
  display: flex;
  justify-content: center;
}
.myBpox {
  min-height: 60vh;
}
</style>
